<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>:header选择器 了解</title>
		<style>
			*{
				font-family: "微软雅黑";
			}
			
			.red{
				background-color: #ef5b00;
				color: white;
				padding: 5px 10px;
			}
			
			h1,h2,h3,h4,h5{
				display: inline-block;
			}
			
			input[type=button]{
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: center;
				display: block;
				cursor: pointer;
				font-size: 12px;
				width: 250px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
				
			}
			
		</style>
	</head>
	<body>
		
		<h1>深圳市中深软通科技有限公司1</h1>
		<p>窗前明月光</p>
		<h2>深圳市中深软通科技有限公司2</h2>
		<p>疑是地上霜</p>
		<h3>深圳市中深软通科技有限公司3</h3>
		<p>举头望明月</p>
		<h4>深圳市中深软通科技有限公司4</h4>
		<p>低头思故乡</p>
		<h5>深圳市中深软通科技有限公司5</h5>
		<p>江南空气</p>
		
		<h6>深圳市中深软通科技有限公司6</h6>
		
		<input type="button" onclick="search();" value="==拿到所有的h1-h6标签" />
	</body>
	
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
		function search(){
			var elements = $(":header");
			//elements.addClass("red");
			
			//链式编程
			//elements.css("color","red").css("background-color","green").css("font-weight","bold");
			
			elements.css({
				"color":"red",
				"background-color":"green",
				"font-weight":"bold"
			});
			
			
			elements.each(function(index,data){
				console.log("index=["+index+"],data=["+/*data.innerHTML*/ /*data.innerText*/ data.textContent +"]");
			});
		}
	</script>
</html>

<!--
	作者：offline
	时间：2016-05-26
	描述： :header语法总结：
	
	1: 匹配如 h1, h2, h3之类的标题元素
	
-->

